<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
</head>
<style>
    .option {
        margin-top: 30px;
    }

    /*分页栏染色*/
    .layui-table-page {
        background-color: #e6e6e6;
    }
    .reply{
        width: 700px;
        height: 300px;
        margin: 20px;
    }
</style>
<body>
<div class="layui-fluid">
    <div class="layui-row option">
        <div class="layui-col-sm2">
            <form class="layui-form">
                <select id="status" lay-verify="" lay-filter="status">
                    <option value="0">请选择状态</option>
                    <option value="1">未回复</option>
                    <option value="2">已回复</option>
                </select>
            </form>
        </div>
        <div class="layui-col-sm2 layui-col-md-offset6">
            <!--<input type="text" name="title" required lay-verify="required" placeholder="search" autocomplete="off"
                   class="layui-input" style="border-radius: 10px">-->
        </div>
        <div class="layui-col-sm1 " style="padding-left: 20px">
            <!--<button class="layui-btn layui-btn-radius layui-btn-normal">搜索</button>-->
        </div>
    </div>
    <div class="layui-row option">
        <div class="layui-col-sm12">
            <!--数据表格-->
            <table id="replyList" lay-filter="test"></table>
        </div>
    </div>
</div>

</body>
<script src="/cms/js/jquery.min.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>
<!--工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <!--layui-btn-sm-->
        <button class="layui-btn layui-btn-warm" lay-event="getCheckData">回复</button>
        <button class="layui-btn layui-btn-danger" lay-event="deleteData" style="margin-left: 30px">删除</button>
    </div>
</script>
<!--格式化-->
<script type="text/html" id="titleTpl">
    {{#  if(d.status == 1){ }}
    未回复
    {{#  } else { }}
    已回复
    {{#  } }}
</script>
<script>
    /*富文本*/
    var index;
    var layedit;
    var tableReply;
    //用户select 记录
    var selectRecord = 0;

    layui.use('form', function () {
        var form = layui.form;
        //监听select改变事件
        form.on('select(status)', function (data) {
            selectRecord = data.value
            reload(data.value)
        });
    });

    layui.use('table', function () {
        var table = layui.table;
        //第一个实例
        tableReply = table.render({
            id: 'replyTable'
            , elem: '#replyList'
            , toolbar: '#toolbarDemo'
            , url: '/cms/commentList' //数据接口
            , page: true //开启分页
            , limit: 15//开局默认显示的条数
            , limits: [15, 30, 45, 60]//分页选项
            , even: true //斑马线
            , cols: [[ //表头
                {type: 'radio'}
                , {field: 'id', title: 'ID'}
                , {field: 'ip', title: '用户ip'}
                , {field: 'title', title: '文章标题', sort: true}
                , {field: 'author', title: '用户名称'}
                , {field: 'content', title: '留言内容'}
                , {field: 'agent', title: '留言设备', sort: true}
                , {field: 'created', title: '留言时间', sort: true}
                , {field: 'status', title: '是否回复', templet: '#titleTpl'}
                , {field: 'reply', title: '回复内容'}
            ]]
        });
        /*监听头部事件*/
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            var data = checkStatus.data;
            switch (obj.event) {
                case 'getCheckData':
                    if (data) {
                        //判断是否已经回复
                        if (data[0].status == 1) {
                            //弹出回复窗口
                            layer.open({
                                type: 1,
                                content: "<textarea id='demo' class='reply'   style='overflow:hidden'></textarea>",
                                title: "回复内容",
                                area:['747px','450px'],
                                btn: ['回复'],
                                yes: function (index, layero) {
                                    $.ajax({
                                        url: "/cms/commentReply",
                                        data: {
                                            id: data[0].id,
                                            content: $("#demo").val()
                                        },
                                        success: function(data) {
                                            if (data.ret == 200) {
                                                //回复成功
                                                layer.closeAll();
                                                layer.alert("回复成功");
                                                //重新加载数据
                                                reload(selectRecord)
                                            } else {
                                                layer.alert("回复失败");
                                            }
                                        }
                                    });
                                }
                            });
                        } else {
                            //弹出已经回复窗口
                            layer.alert("你已经回复了");
                        }
                    } else {
                        layer.alert("请选择一行");
                    }
                    break;
                case 'deleteData':
                    //删除
                    $.ajax({
                        url: "/cms/deleteReply",
                        data: {id: data[0].id},
                        success: function (data) {
                            if (data.ret == 200) {
                                //回复成功
                                layer.closeAll();
                                layer.alert("删除成功");
                                //重新加载数据
                                reload(selectRecord)
                            } else {
                                layer.alert("删除失败");
                            }
                        }
                    });
                    break;
            }
            ;
        });
    });
    //重新加载数据
    function reload(status) {
        tableReply.reload({
            where: { //设定异步数据接口的额外参数，任意设
                status: status
            }
            , page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }
</script>

</html>